<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>名师讲谈</title>
    <link rel="styllesheet" href="index.css">
    <style>
        div{
            color:red;
            background-color: tan;
            display:block;
            
        }
        .good-demo {
            color:purple;
            background-color:yellow; 
            
        }
        .bad-demo {
            color: black;
            background-color: cadetblue;
            margin-bottom: 5px;
        }
        #girl{
            color: pink;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div style="color: red;background-color: seagreen;">我是一个好项目 i'm a good demo</div>
    <div>我是一个好项目 I‘m a good demo</div>
    <div>我是一个好项目 I‘m a good demo</div>
    <div>我是一个好项目 I‘m a good demo</div>
    <div class="bad-demo">我是一个坏项目 I‘m a bad demo</div>
    <div id="girl" class="good-demo">我是一个坏项目 I‘m a bad demo</div>
    <div class="good-teacher">
        <span style="margin-right: 10px;">1</span>
        <span>2</span>
    </div>
    <!--
        display:block 块级元素 inline 行内元素 inline-block none
    -->


</body>
</html>